<!--
 * @Description: * 
 * @Date: 2021-01-04 20:57:35
 * @LastEditTime: 2021-03-21 14:31:54
 * @Author: Ji YingHao
 * @FilePath: /nuxt-app/components/vip.vue
-->
<template>
   <div class="vip">
       <div v-if="false">
          <p class="p1">恭喜您，您已经是尊贵的 <span>月度会员！</span> </p>
          <p class="p2"><Icon type="md-medal" /></p>
          <p class="p3">会员将于 <span>2021-04-21 12:59:01</span> 过期</p>
          <p class="p4">
            <nuxt-link
                  class="link_"
                  :to="{ name: 'vip', query: { id: '' } }"
                >
                <Button shape="circle" type="error">续费升级</Button>
            </nuxt-link>
         </p>
       </div>
       <div v-if="true">
          <p class="p1"> 您还不是会员！ </p>
          <p class="p2"><Icon type="md-outlet" /></p>
          <p class="p3"> 成为会员开始下载资源~ </p>
          <p class="p4">
             <nuxt-link
                  class="link_"
                  :to="{ name: 'vip', query: { id: '' } }"
                >
                <Button shape="circle" type="error">续费升级</Button>
            </nuxt-link>
          </p>
       </div>
   </div>
</template>
<script>
   export default { 
      name: "vip",
      components: {},
      data() {
         return {
             
         }
      },
      computed: {},
      mounted: function() {},
      methods: {
      }
   }
</script>
<style lang="scss">
.vip{
  padding-top: 50px;
  padding-bottom: 90px;
  >div{
     p{
        text-align: center;
        font-size: 16px;
     }
      .p1{
         span{
            color: #ed4014;
         }
      }
      .p2{
         font-size: 80px;
         margin-top: 30px;
      }
      .p3{
         margin-top: 30px;
         span{
            color: #ed4014;
         }

      }
      .p4{
         margin-top: 30px;
         button{
            width: 260px;
         }
      }
  }
}
</style>